//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.0

Window {
    id: window
    visible: true
    width: 650
    height: 480
    title: qsTr("Hello World")

    Loader {
        id: loadPage1
        anchors.top: parent.top
        anchors.topMargin: 100
        anchors.left: parent.left
        anchors.leftMargin: 50
    }

    Loader {
        id: loadPage2
        anchors.top: parent.top
        anchors.topMargin: 100
        anchors.left: parent.left
        anchors.leftMargin: 350
    }

    Connections{
        target: loadPage2.item //通过Loader加载的对象只能通过item属性进行访问
        onMessage: {
            console.log("loadPage2.onMessage")
            rooter.text = "msg = " + msg + " item.width = " + loadPage2.item.width + " item.height = " + loadPage2.item.height
        }
    }

    Loader {
        id: loadMyComponent
        anchors.top: parent.top
        anchors.topMargin: 300
        anchors.left: parent.left
        anchors.leftMargin: 350
    }

    Loader {
        id: loadComponent1
        anchors.top: parent.top
        anchors.topMargin: 100
        anchors.left: parent.left
        anchors.leftMargin: 200
    }

    Component{
        id: component1
        Rectangle {
            width: 100
            height: 100
            color: "yellow"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("yellow Rectangle Clicked")
                }
            }
        }
    }

    Loader {
        id: loadComponent2
        anchors.top: parent.top
        anchors.topMargin: 300
        anchors.left: parent.left
        anchors.leftMargin: 200
        sourceComponent: component2
    }

    Component{
        id: component2
        Rectangle {
            width: 100
            height: 100
            color: "green"
        }
    }

    Component {
        id: myComponent

        Rectangle {
            width: 100
            height: 100
            color: "red"
            Text {
                id: name
                text: qsTr("MyComponent")
            }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("red Rectangle Clicked")
                }
            }
            Component.onCompleted: {
                rooter.text = "MyComponent onCompleted"
            }


            Component.onDestruction: {
                rooter.text = "MyComponent onDestruction"
            }
        }
    }

    Text {
        id: rooter
        y: 445
        height: 20
        text: qsTr("Message")
        styleColor: "#d78f8f"
        verticalAlignment: Text.AlignVCenter
        anchors.right: parent.right
        anchors.rightMargin: 2
        anchors.left: parent.left
        anchors.leftMargin: 2
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 2
        font.pixelSize: 12
    }

    ColumnLayout {
        y: 0
        height: 77
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        spacing: 2

        Row {
            Layout.fillWidth: true
            Layout.preferredHeight: 30
            spacing: 5

            MyButtonType3 {
                text: qsTr("load list, Page1")
                onClicked: {
                    rooter.text = ("============LoaderPage1.qml=========")
                    loadPage1.source = "LoaderPage1.qml"
                }
            }
            MyButtonType3 {
                text: qsTr("load yellow Rect")
                onClicked: {
                    rooter.text = ("=============sourceComponent================")
                    loadComponent1.sourceComponent = component1
                }
            }
            MyButtonType3 {
                text: qsTr("load blue Rect, Page2")
                onClicked: {
                    console.log("================LoaderPage2.qml=============")
                    rooter.text = ("================LoaderPage2.qml=============")
                    loadPage2.source = "LoaderPage2.qml"
                }
            }
            MyButtonType3 {
                text: qsTr("load/unload Red Rect")
                onClicked: {
                    rooter.text = "===============loadMyComponent=============="
                    loadMyComponent.sourceComponent = (loadMyComponent.sourceComponent === null)?myComponent:null
                }
            }
        }

        Row {
            Layout.fillWidth: true
            Layout.preferredHeight: 40
            spacing: 5
            Button {
                id: button
                text: qsTr("Button")
                display: AbstractButton.TextOnly
            }

            MyButtonType3 {
                text: qsTr("MyButtonType3")
                icon.source:"qrc:/myMenu.svg"
                onClicked: {
                    rooter.text = ("===MyButtonType3 clided ==========================")
                }
            }
            MyButtonType3 {
                text: qsTr("MyButtonType3 2")
                display: AbstractButton.TextOnly
                icon.source:"qrc:/myMenu.svg"
                onClicked: {
                    rooter.text = ("===MyButtonType3 clided ==========================")
                }
            }

        }
    }


}


/*##^##
Designer {
    D{i:18;anchors_x:50;anchors_y:20}D{i:17;anchors_width:517;anchors_x:0}
}
##^##*/
